<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click='show'>点我提示学校名字</button>
    </div>
</template>


<script>
    //组件交互相关的代码 数据，方法等
    export default {
            // eslint-disable-next-line vue/multi-word-component-names
            name:'School',
            data(){
                return {
                    name:"北大",
                    address:"北京" 
                }
            },
            methods: {
                show(){
                    alert(this.name)
                }
            },
        }
</script>



<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>